<template>
    <div class="temporary-task-wrap">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
            <el-form-item v-if="isMuilUnitUser">
                <el-select filterable @change="getTable(1)" v-model="searchForm.orgIds" placeholder="请选择业主单位">
                    <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
                    <el-option
                        v-for="item in orgOptions"
                        :key="item.organizationId"
                        :label="item.shortName"
                        :value="item.organizationId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="searchForm.time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="util.intTimePickerOptions()"
                    @change="getTable(1)">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.workDesc" auto-complete="off" placeholder="请输入搜索内容" @keyup.enter.native="getTable(1)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="getTable(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
          <el-col :span="6">
            <div class="item-wrap" @click="searchForm.status='-1'" :class="searchForm.status==-1 ? 'active' : ''">
              <div class="item-content">
                <p class="item-value color-8">{{ headerStatis.total }}</p>
                <p class="item-title">申请总数</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap" @click="searchForm.status='1'" :class="searchForm.status==1 ? 'active' : ''">
              <div class="item-content">
                <p class="item-value color-4">{{ headerStatis.approve }}</p>
                <p class="item-title">审批中</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap" @click="searchForm.status='2'" :class="searchForm.status==2 ? 'active' : ''">
              <div class="item-content">
                <p class="item-value color-3">{{ headerStatis.pass}}</p>
                <p class="item-title">审批通过</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap" @click="searchForm.status='3'" :class="searchForm.status==3 ? 'active' : ''">
              <div class="item-content">
                <p class="item-value color-1">{{ headerStatis.nopass }}</p>
                <p class="item-title">审批不通过</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap" @click="searchForm.status='4'" :class="searchForm.status==4 ? 'active' : ''">
              <div class="item-content">
                <p class="item-value color-5">{{ headerStatis.withdraw }}</p>
                <p class="item-title">已撤回</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-table
            v-loading="loading"
            :data="tableData"
            ref="mainTable"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column v-if="isMuilUnitUser" prop="orgName" width="200" label="业主单位"></el-table-column>
            <el-table-column prop="typeName" label="作业类型"></el-table-column>
            <el-table-column prop="workDesc" label="作业说明" width="200">
                <template slot-scope="scope">
                    <el-tooltip :content="scope.row.workDesc" placement="top">
                        <p>{{ scope.row.workDesc.slice(0, 13) }}</p>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column width="120" label="状态">
                <template slot-scope="scope">
                    <div :class="statusClassMap(scope.row.status)">{{ statusMap(scope.row.status) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="createAccountName" label="创建人"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
            <el-table-column prop="workAccountName" label="作业人">
                <template slot-scope="scope">
                    <span>{{ scope.row.workAccountName.join('、') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="relateTaskDetail" label="相关任务" width="320">
                <template slot-scope="scope">
                    <el-link type="primary" v-for="item in scope.row.relateTaskDetail" :key="item.id" @click="jumpMaintain(item, scope.row.orgName)" style="margin-right: 10px">{{item.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
            <el-table-column type="expand" width='1'>
                <template slot-scope="scope">
                    <el-tabs type="border-card" v-model="defaultTabsName">
                        <el-tab-pane name="baseInfo">
                            <span slot="label"><i class="el-icon-date"></i>基本信息</span>
                                <el-form v-if="workDetailList[scope.row.id]" label-width="120px" class="demo-table-expand">
                                    <el-form-item label="作业说明">
                                        <span>{{ workDetailList[scope.row.id].workDesc }}</span>
                                    </el-form-item>
                                    <el-form-item label="作业区域">
                                        <p v-for="item in workDetailList[scope.row.id].areaName" :key="item">{{ item }}</p>
                                    </el-form-item>
                                    <el-form-item label="作业人">
                                        <span>{{ scope.row.workAccountName.join('、') }}</span>
                                    </el-form-item>
                                    <el-form-item label="相关任务">
                                        <a v-for="item in workDetailList[scope.row.id].relateTaskDetail" :key="item.id" @click="jumpMaintain(item, scope.row.orgName)">{{ item.name + ';'}}<br/></a>
                                    </el-form-item>
                                    <el-form-item label="开始时间">
                                        <span>{{ workDetailList[scope.row.id].beginTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="结束时间">
                                        <span>{{ workDetailList[scope.row.id].endTime }}</span>
                                    </el-form-item>
                                </el-form>
                                <p v-else style="text-align: center;">暂无信息</p>
                        </el-tab-pane>
                        <el-tab-pane name="approvalFlow">
                            <span slot="label"><i class="el-icon-date"></i>审批流</span>
                            <div class="maintenance-record-wrap block">
                                <el-timeline v-if="workDetailList[scope.row.id]">
                                    <!-- 第一个节点从外层数据获取 -->
                                    <el-timeline-item :timestamp="workDetailList[scope.row.id].beginTime" hide-timestamp>
                                        <p>{{workDetailList[scope.row.id].createAccountName}}&nbsp;&nbsp;发起申请</p>
                                        <p>{{workDetailList[scope.row.id].beginTime}}</p>
                                        <el-card>
                                            <p>{{workDetailList[scope.row.id].workDesc}}</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <template v-for="item in workDetailList[scope.row.id].approvalDetail">
                                        <el-timeline-item v-if="item.result != null" :key="item.id" :timestamp="item.createTime" hide-timestamp>
                                            <p>{{item.approvalAccountName}}&nbsp;&nbsp;{{mapApprovalFlowType(item.result)}}</p>
                                            <p>{{item.createTime}}</p>
                                            <el-card>
                                                <p>{{item.approvalDesc}}</p>
                                            </el-card>
                                        </el-timeline-item>
                                        <el-timeline-item v-else-if="workDetailList[scope.row.id].status != 4 && workDetailList[scope.row.id].status != 3" :key="item.id" :timestamp="item.createTime" hide-timestamp>
                                            <p>等待{{item.approvalAccountName}}&nbsp;&nbsp;审批</p>
                                        </el-timeline-item>
                                    </template>
                                    <el-timeline-item v-if="workDetailList[scope.row.id].status == 4" :timestamp="workDetailList[scope.row.id].updateTime" hide-timestamp>
                                        <p>{{workDetailList[scope.row.id].createAccountName}}&nbsp;&nbsp;撤回</p>
                                        <p>{{workDetailList[scope.row.id].updateTime}}</p>
                                    </el-timeline-item>
                                </el-timeline>
                                <!-- <p v-else class="no-data">暂无数据</p> -->
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import util from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getWorkApplyRecordsForPc, getWorkApplyCountForPc, getWorkApplyDetail } from '@/api/workApply'

export default {
    name: 'JobApplication',
    data() {
        return {
            util: util,
            loading: false,
            orgOptions: [],
            searchForm: {
                orgIds:this.$store.state.userinfo.isMuilUnitUser? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
                time: '', // 创建时间
                status: '-1', // 状态
                workDesc: '', // 模糊搜索
            },
            isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
            headerStatis: {
                total: 0,
                pass: 0,
                approve: 0,
                nopass: 0,
                withdraw: 0
            },
            tableData: [],
            defaultTabsName: 'baseInfo',
            workDetailList: {}, // 详情信息
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    created() {
        let that = this
        that.getTable()
        // 绑定下拉框
        if(that.isMuilUnitUser) {
            getOrgList({queryType: 0}).then(res => {
                that.orgOptions = res.data
            })
        }
    },
    methods: {
        //头部统计
        getStatis() {
            let that = this
            let parames = {
                orgIds: that.searchForm.orgIds || this.$store.state.userinfo.organizationIds,
                workDesc: that.searchForm.workDesc.trim(),
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                pageType: 0
            }
            getWorkApplyCountForPc(parames).then(res => {
                $.extend(that.headerStatis, res.data)
            })
        },
        getTable(_pageIndex, _pageSize, isChangeState) {
            if(_pageIndex){
                this.currentPage = _pageIndex
            }
            if(_pageSize){
                this.pageSize = _pageSize
            }
            let that = this
            let parames = {
                orgIds: that.searchForm.orgIds || this.$store.state.userinfo.organizationIds,
                status: that.searchForm.status, // 处理状态
                workDesc: that.searchForm.workDesc.trim(),
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                pageType: 1,
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize
            }
            that.loading = true
            getWorkApplyRecordsForPc(parames).then(res => {
                that.total = res.total
                that.tableData = res.data
                that.loading = false
            })
            if(!isChangeState) {
                // 获取统计信息
                that.getStatis()
            }
        },
        pageSizeChange(val) {//页码切换
            this.getTable(1, val, true)
        },
        pageChange(val) {//翻页
            this.getTable(val, this.pageSize, true) 
        },
        showDetail(row) {
            let that = this
            if(row && !that.workDetailList.hasOwnProperty(row.id)) {
                // 获取详情
                getWorkApplyDetail({id: row.id}).then(res => {
                   that.$set(that.workDetailList, row.id, res.data)
                })
            }
            that.$refs.mainTable.toggleRowExpansion(row)
        },
        statusMap(code) {
            const statusMAP = {
                1: '审批中',
                2: '审批通过 ',
                3: '审批不通过',
                4: '已撤回'
            }
            return statusMAP[code] || '-'
        },
        statusClassMap(code) {
            const statusClassMap = {
                1: 'type-tags type-color-4',
                2: 'type-tags type-color-3',
                3: 'type-tags type-color-1',
                4: 'type-tags type-color-5'
            }
            return statusClassMap[code] || 'type-tags'
        },
        mapApprovalFlowType(code) {
            const approvalFlowMAP = {
                0: '审批不通过',
                1: '审批通过 '
            }
            return approvalFlowMAP[code] || '-'
        },
        // 点击相关任务跳转
        jumpMaintain(row, orgName) {
            debugger
            let params = {
                level: 2, // level  页面跳转显示   1-多单位   2-单单位
                orgId: row.orgId, // 单位编码
                orgName: orgName || '', // 单位名称
                name: row.name, // 搜索内容
                systomType: row.name
            }
            this.$router.push({
                name:'maintenanceTask',
                params
            })
        }
    },
    watch: {
        currentStatus(val, oldVal) {
            if(val !== oldVal) {
                this.getTable(1, false, true)
            }
        }
    },
    computed: {
        currentStatus() {
            return this.searchForm.status
        }
    }
}
</script>

<style lang="scss">
.temporary-task-wrap {
    .no-data {
        text-align: center
    }
}
</style>

